<!--
 * @Description: 概况
 * @Author: py
 * @Date: 2024-10-31
-->
<script setup lang='ts'>
import { useOverview } from '@fl/api/data-analysis'
import { cloneDeep } from 'lodash-es'

import type { Dimension } from '../types'

import activityIcon from '../images/icon_activity.png'
import appIcon from '../images/icon_app.png'
import couponIcon from '../images/icon_coupon.png'
import enterprisIcon from '../images/icon_enterprise.png'
import houseIcon from '../images/icon_house.png'
import projectIcon from '../images/icon_project.png'
import userIcon from '../images/icon_user.png'

const initialList = [
    {
        name: 'APP下载数',
        prop: 'download',
        url: appIcon,
        value: '--',
    },
    {
        name: '注册数',
        prop: 'register',
        url: userIcon,
        value: '--',
    },
    {
        name: '上链企业（家）',
        prop: 'enterprise',
        url: enterprisIcon,
        value: '--',
    },
    {
        name: '上线项目（个）',
        prop: 'project',
        url: projectIcon,
        value: '--',
    },
    {
        name: '待售房源（套）',
        prop: 'house',
        url: houseIcon,
        value: '--',
    },
    {
        name: '活动项目（个）',
        prop: 'activity',
        url: activityIcon,
        value: '--',
    },
    {
        name: '上线优惠券（种）',
        prop: 'coupon',
        url: couponIcon,
        value: '--',
    },
]
const dimenList = ref<Dimension[]>(initialList)

const { data } = useOverview()

watchEffect(() => {
    if (data.value) {
        const finalList = cloneDeep(initialList).map((item) => {
            let fieldVal = data.value[item.prop]
            if (fieldVal === null) {
                fieldVal = '--'
            }

            if (item.prop === 'house') {
                if (fieldVal !== '0' && fieldVal > 10000) {
                    fieldVal = `${(fieldVal / 10000).toFixed(2)}万`
                }
            }

            return {
                ...item,
                value: fieldVal,
            }
        })
        dimenList.value = finalList
    }
})
</script>

<template>
    <div class="module-panel">
        <h5 class="module-title">
            概况
        </h5>

        <div class="dimen-list">
            <div v-for="(item, index) in dimenList"
                 :key="index"
                 class="dimen-item"
            >
                <img class="dimen-icon"
                     :src="item.url"
                     alt=""
                >

                <div>
                    <p class="dimen-title">
                        {{ item.name }}
                    </p>

                    <span class="dimen-value">{{ item.value }}</span>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="less" scoped>
@import '../panel.less';

.dimen-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
    gap: 15px 8px;

    .dimen-item {
        // flex: 1;
        display: inline-flex;
        align-items: center;

        .dimen-icon {
            width: 48px;
            height: 48px;
            margin-right: 10px;
        }

        .dimen-title {
            font-size: 14px;
            line-height: 20px;
            color: #4e5969;
            margin-bottom: 4px;
        }

        .dimen-value {
            font-size: 16px;
            font-weight: 600;
            line-height: 22px;
            color: #1d2129;
        }
    }
}
</style>
